<template>
  <div class="page-header-index-wide">
    <a-spin tip="Loading..." :spinning="loading">
    <a-row :gutter="24">
      <div style="position: absolute;left: 100%;height: 50px;width: 50px;z-index: 99999;transform: translateX(-100%);cursor: pointer;" @click="refreshData">
        <img src="../../assets/refresh (4).svg" style="height: 100%;width: 100%" alt="">
      </div>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('today','存续中',0)">
        <chart-card :loading="loading" title="即将到期业务" data-step="1" data-intro="统计即将到期业务">
          <a-tooltip title="统计即将到期业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="red" :content="statistics['today-OverdueBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('inThreeDay','已逾期',0)">
        <chart-card :loading="loading" title="3天以内累计逾期业务" data-step="2" data-intro="统计3天以内累计逾期业务">
          <a-tooltip title="统计3天以内累计逾期业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="red" :content="statistics['inThreeDay-OverdueBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('outThreeDay','已逾期',0)">
        <chart-card :loading="loading" title="3天以上累计逾期业务" data-step="3" data-intro="统计3天以上累计逾期业务">
          <a-tooltip title="统计3天以上累计逾期业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="red" :content="statistics['outThreeDay-OverdueBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('today2','存续中',0)">
        <chart-card :loading="loading" title="今日新增业务">
          <a-tooltip title="统计今日新增业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(115,241,115)" :content="statistics['today-AddBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('month','存续中',0)">
        <chart-card :loading="loading" title="本月累计业务">
          <a-tooltip title="统计本月累计业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(115,241,115)" :content="statistics['month-AddBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('year','存续中',0)">
        <chart-card :loading="loading" title="今年累计业务">
          <a-tooltip placement="left" title="统计今年累计业务" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(115,241,115)" :content="statistics['year-AddBus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('today','',1)">
        <chart-card :loading="loading" title="今日新增客户">
          <a-tooltip title="统计今日新增客户" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(24,144,255)" :hasFlag="false" :content="statistics['today-AddCus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('month','',1)">
        <chart-card :loading="loading" title="本月累计客户">
          <a-tooltip title="统计本月累计客户" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(24,144,255)" :hasFlag="false" :content="statistics['month-AddCus']"></head-info>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="7" :style="{ paddingRight: '0px',marginBottom: '20px',marginRight:'50px' }" @click="navigationTo('year','',1)">
        <chart-card :loading="loading" title="今年累计客户">
          <a-tooltip title="统计今年累计客户" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <head-info color="rgb(24,144,255)" :hasFlag="false" :content="statistics['year-AddCus']"></head-info>
        </chart-card>
      </a-col>
    </a-row>
    </a-spin>
  </div>
</template>
<script>
  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniProgress from '@/components/chart/MiniProgress'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
import { getBusinessList, getBusinessListData, getBusinessStatistics } from '../../api/api'

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniProgress,
      HeadInfo
    },
    data() {
      return {
        statistics: {},
        loading:false
      }
    },
    created() {
      //  setTimeout(() => {
      //    this.loading = !this.loading
      //  }, 1000)
      this.GetBusinessStatistics()
      // this.GetBusinessList()
    },
    methods: {
      GetBusinessStatistics() {
        this.loading = true
        getBusinessStatistics().then(res => {
          this.statistics = res.data
          this.loading = false
        }) 
      },
      GetBusinessList(){
        getBusinessList({
          currentPage:1,
          pageSize:10000
        }).then(res => {
          console.log(res,'res');
        })
      },
      refreshData(){
        this.loading = true
        getBusinessListData().then(res => {
        
        }).finally(()=>{
          this.loading = false
          this.GetBusinessStatistics()
        })
      },
      navigationTo(date,status,type = 0){
        // finance/expenditure/list
        let d = []
        let currentDate = new Date();
        let today = currentDate.toISOString().split('T')[0];
        let state = 0
        d.push(today)
        // status = null
        if(date == 'outThreeDay'){
          status = '已逾期'
          d.pop()
          currentDate.setDate(currentDate.getDate() - 3)
          d.push(...[null,currentDate.toISOString().split('T')[0]])
        }else if(date == 'inThreeDay'){
          status = '已逾期'
          currentDate.setDate(currentDate.getDate() - 2)
          d.unshift(currentDate.toISOString().split('T')[0])
        }else if(date == 'today'){
          d.push(today)
          status = '存续中'
        }
          else if(date == 'today2'){
          d.push(today)
          status = '存续中'
          state = 1
        }else if(date == 'month'){
          state = 1
          d.pop()
          currentDate.setDate(1)
          d.push(...[currentDate.toISOString().split('T')[0],null]) 
        }else if(date =='year'){
          state = 1
          d.pop()
          currentDate.setDate(1)
          currentDate.setMonth(0) 
          d.push(...[currentDate.toISOString().split('T')[0],null])
        }
        if(type == 0){
          this.$router.push({
            path: '/BusinessManage/list',
            query: {
              status: status,
              date: d,
              state:state
            }
          })
        }else{
          this.$router.push({
           path:'/custom/list',
           query:{
            date:d
           }
          }) 
        }
      },
      handleHoverChange(visible) {
        this.hovered = visible
      }
    }
  }
</script>
<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }
  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;
    &.center {
      text-align: center;
      padding: 0 32px;
    }
    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>